<template>
  <el-dialog @close="reset" :title="seckillData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
    <el-form
      ref="seckillForm"
      label-width="80px"
      :model="seckillData"
      :rules="rules"
    >
      <el-form-item label="活动名称" prop="title">
        <el-input placeholder="活动名称" v-model="seckillData.title"></el-input>
      </el-form-item>
      <el-form-item label="一级分类" prop="first_cateid">
        <el-select
          v-model="seckillData.first_cateid"
          placeholder="请选择"
          @change="firstCateChange"
        >
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类" prop="second_cateid">
        <el-select
          v-model="seckillData.second_cateid"
          placeholder="请选择"
          @change="secondCateChange"
        >
          <el-option
            v-for="item in secondCateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动商品" prop="goodsid">
        <el-select v-model="seckillData.goodsid" placeholder="请选择">
          <el-option
            v-for="item in goodsList"
            :key="item.id"
            :value="item.id"
            :label="item.goodsname"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="begintime">
        <el-date-picker
          v-model="seckillData.begintime"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endtime">
        <el-date-picker
          v-model="seckillData.endtime"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="活动状态" prop="status">
        <el-radio-group v-model="seckillData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from "moment";
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
// 导入数据请求方法
import { getGoodsListBySid } from "../../request/goods";
const initData = {
  title: "", // 活动名称
  first_cateid: "", // 一级分类
  second_cateid: "", // 二级分类
  goodsid: "", // 商品id
  begintime: "", // 开始时间
  endtime: "", // 结束时间
  status: "", // 活动状态f
};
export default {
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  methods: {
    ...mapActions("cate", ["getCateListAction"]),
    ...mapActions("seckill", ["getSeckillListAction"]),
    reset() {
      // 重置表单数据
      this.seckillData = {
        ...initData,
      };
      // 重置二级分类下拉框
      this.secondCateList=[];
      // 重置商品下拉框
      this.goodsList=[];
      // 关闭对话框
      this.info.isShow = false;
    },
    submit() {
      this.$refs.seckillForm.validate((valid) => {
        if (valid) {
          // 将日期字符串转换成毫秒值
          this.seckillData.begintime = new Date(
            this.seckillData.begintime
          ).getTime();
          this.seckillData.endtime = new Date(
            this.seckillData.endtime
          ).getTime();
          // 发请求提交数据
          const url=this.seckillData.id>0?'/seckedit':'/seckadd';
          this.$axios.post(url, this.seckillData).then((res) => {
            if (res.code === 200) {
              // 提示
              this.$message.success(res.msg);
              // 更新列表
              this.getSeckillListAction();
              //   重置数据
              this.reset();
            } else {
              // 错误提示
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 一级分类下拉框change事件处理函数
    firstCateChange(id, flag = true) {
      // 1-根据一级分类id查找一级分类在数组中的索引
      const index = this.cateList.findIndex((item) => item.id === id);
      // 2-根据索引找到对应的二级分类
      // console.log(this.cateList[index].children);
      // 先清空之前选择的二级分类: 通过鼠标点击触发的时候, 需要清空second_cateid, 如果是手动调用则不需要清空
      if (flag) {
        this.seckillData.second_cateid = "";    // 清空之前选择的二级分类
        this.seckillData.goodsid = "";    // 清空之前选择的商品
        this.goodsList=[];   // 清空商品列表
      }
      if (this.cateList[index].children) {
        // 更新二级分类
        this.secondCateList = this.cateList[index].children;
      } else {
        this.secondCateList = [];
      }
    },
    // 二级分类下拉框change事件处理函数
    secondCateChange(sid, flag = true) {
      // 根据二级分类id获取对应商品
      getGoodsListBySid(sid).then((res) => {
        if (res.code === 200) {
          // 更新商品列表
          this.goodsList = res.list;
        }
      });
      // 清空之前选择的商品
      if (flag) {
        this.seckillData.goodsid = "";
      }
    },
    // 格式化时间
    dateFmt(timestamp) {
      // 数据接口返回的开始时间和结束时间是字符串类型, 一定要将其转换成数值类型
      return moment(parseInt(timestamp)).format(`YYYY-MM-DD hh:mm:ss`);
    },
    // 设置表单数据
    setSeckillData(obj) {
      // 更新和表单元素绑定的数据
      this.seckillData = { ...obj };
      // 将开始时间和结束事件转换为日期字符串
      this.seckillData.begintime = this.dateFmt(obj.begintime);
      this.seckillData.endtime = this.dateFmt(obj.endtime);
      // 根据一级分类id查找二级分类列表
      this.firstCateChange(obj.first_cateid, false);
      // 根据二级分类id,查询商品列表
      this.secondCateChange(obj.second_cateid, false);
    },
  },
  props: ["info"],
  data() {
    return {
      // 商品列表数组
      goodsList: [],
      // 二级分类数组
      secondCateList: [],
      // 和表单进行绑定
      seckillData: { ...initData },
      //  表单校验规则
      rules: {
        title: { required: true, message: "请输入活动名称", trigger: "blur" },
        first_cateid: { required: true, message: "请选择", trigger: "blur" },
        second_cateid: { required: true, message: "请选择", trigger: "blur" },
        goodsid: { required: true, message: "请选择", trigger: "blur" },
        begintime: { required: true, message: "请选择", trigger: "blur" },
        endtime: { required: true, message: "请选择", trigger: "blur" },
        status: { required: true, message: "请选择", trigger: "blur" },
      },
    };
  },
  created() {
    // 请求分类列表:树形数组
    this.getCateListAction();
  },
};
</script>

<style>
</style>